<template>
  <view class="addPlaying">
    <fui-icon @click="show = true" name="plus"></fui-icon>
  </view>

  <fui-bottom-popup :show="show" @close="closePopup">
	<view class="fui-scroll__wrap">
		<view class="fui-title">请添加玩法</view>
		<scroll-view scroll-y class="fui-scroll__view">
			<fui-list-cell v-for="(item,index) in dataList" :key="index">
               <view class="add-info">
                <fui-avatar :src="item.image"></fui-avatar>
                <text>{{item.name}}</text>
               </view>
               <view @click="addPlaying(item.id)">
                添加
               </view>
            </fui-list-cell>
		</scroll-view>
		<view class="fui-icon__close" @tap="closePopup">
			<fui-icon name="close" :size="48"></fui-icon>
		</view>
	</view>
</fui-bottom-popup>

</template>

<script setup lang="ts">
import dyPlayingService from "@/api/dyPlayingService";
import dyUserPlayingService from "@/api/dyUserPlayingService";
const emits = defineEmits(['getUserPlayList']);
const  pageNo = ref(0)
const  pageSize = ref(10)
 const show = ref(false)
const dataList = ref()
 const getList =async ()=>{
    const {success,result} = await dyUserPlayingService.getAddUserPlayList()
    if(success){
        dataList.value = result
    }
}

// const getList =async ()=>{
//     const {success,result} = await dyUserPlayingService.getAddUserPlayList()
//     if(success){
//         dataList.value = result
//     }
// }

const addPlaying = async (id:string)=>{
    dataList.value = dataList.value.filter((item:any) => item.id !== id);
    await  dyUserPlayingService.addUserPlayId({id:id})
    emits('getUserPlayList');
}

onMounted(()=>{
    getList()
})


 const closePopup = ()=>{
    show.value = false
 }
 defineExpose({ getList })
</script>

<style lang="scss" scoped>
.addPlaying{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: #d82d2d;
    display: flex;
    align-items:center;
    justify-content: center;
    position: fixed;
    top: 70%;
    right: 5%;
}
.add-info{
    display: flex;
    align-items: center;
    text{
        margin-left: 10rpx;
    }
}
.fui-custom__wrap {
	width: 100%;
	height: 520rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fui-scroll__wrap {
	padding-top: 30rpx;
	position: relative;
}
.fui-title {
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	padding-bottom: 24rpx;
}
.fui-icon__close {
	position: absolute;
	top: 24rpx;
	left: 24rpx;
}

.fui-scroll__view {
	width: 100%;
	height: 600rpx;
}

</style>
